<template>
	<view>
		<unicloud-db ref="udb" v-slot:default="{ data, loading, error, options }" collection="changelog" orderby="name desc">
			<view v-if="error">{{ error.message }}</view>
			<view v-else>
				<view class="enl-log-box" @click="isDever ? showModal(item) : ''" @longpress="isDever ? reItem(item._id) : ''" v-for="(item, index) in data" :key="index">
					<view class="title">{{ item.name }}（正式版）主要更新</view>
					<view class="date">{{ item.date }}</view>
					<view class="manages">
						<text>{{ item.manages }}</text>
					</view>
				</view>
			</view>
		</unicloud-db>
		<!-- 悬浮添加按钮 -->
		<view class="add-float" v-if="isDever" @click="addMamage"><view class="cuIcon-roundaddfill iconSize"></view></view>
		<!-- 模态窗 -->
		<view class="cu-modal" :class="!!modalName ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ `${modelData.name || ''}更新说明` }}</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
				</view>
				<form @submit="modelData._id ? updateFu() : addFu()">
					<view class="text-left">
						<view class="cu-form-group margin-top">
							<view class="title">版本：</view>
							<input placeholder="请输入更新版本号" v-model="modelData.name" />
						</view>
						<view class="cu-form-group" @click="showCalendar = true">
							<view class="title">日期：</view>
							<input placeholder="请输入更新日期" v-model="modelData.date" />
							<!-- 这里日期可自定加入日期组件点击呈现 -->
						</view>
						<view class="cu-form-group">
							<view class="title">内容：</view>
							<textarea placeholder="请输入更新内容" maxlength="-1" v-model="modelData.manages"></textarea>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left" form-type="submit">确定</button>
						</view>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isDever: uni.getStorageSync('isDeveloper'), //是否开发者
			modalName: null,
			modelData: {}
		};
	},
	onPullDownRefresh() {
		//下拉刷新uniCloud表
		this.$refs.udb.loadData(
			{
				clear: true
			},
			() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}
		);
	},
	methods: {
		//呈现模态框
		showModal(val) {
			this.modalName = true;
			this.modelData = val;
		},
		//隐藏模态框
		hideModal(e) {
			this.modalName = null;
		},
		//添加按钮-呈现对话框
		addMamage() {
			this.modelData = {};
			this.modalName = true;
		},
		//添加记录
		addFu() {
			console.log('this.modelData: ', this.modelData);
			if (!this.modelData.name || !this.modelData.date || !this.modelData.manages) {
				uni.showToast({
					title: '请完整填入数据'
				});
				return;
			}
			const db = uniCloud.database();
			db.collection('changelog')
				.add(this.modelData)
				.then(e => {
					this.modalName = null;
					this.modelData = {};
					console.log('e: ', e);
					uni.showToast({
						title: '新增成功'
					});
					this.$refs.udb.refresh(); //清空并重新加载当前页面数据
				})
				.catch(err => {
					uni.showToast({
						title: '新增失败'
					});
				});
		},
		//点击可更新修改记录
		updateFu() {
			this.modalName = null;
			console.log('this.modelData: ', this.modelData);
			const db = uniCloud.database();
			let item = { ...this.modelData };
			delete item._id;
			db.collection('changelog')
				.doc(this.modelData._id)
				.update(item)
				.then(e => {
					uni.showToast({
						title: '修改成功'
					});
					this.$refs.udb.refresh(); //清空并重新加载当前页面数据
				});
		},
		//长按移除记录
		reItem(id) {
			console.log('reItem==》', id);
			this.$refs.udb.remove(id);
		}
	}
};
</script>

<style lang="scss">
.enl-log-box {
	margin: 30rpx;
	padding: 20rpx;
	background: #ffffff;
	box-shadow: 0px 4rpx 20rpx rgba(137, 143, 155, 0.2);
	border-radius: 16rpx;
	line-height: 40rpx;

	.title {
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
	}
	.date {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.manages {
		margin: 10rpx 0 0;
		padding: 20rpx;
		background: #f1f1f1;
		border-radius: 14rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}
}
.add-float {
	position: fixed;
	bottom: 30rpx;
	right: 30rpx;
	z-index: 99;
	.iconSize {
		font-size: 60rpx;
	}
}
</style>
